<template>
  <div>
    <h1>WxPay</h1>
    <canvas id="canvas"></canvas>
  </div>
</template>

<script>
import  Vue from 'vue';
import QRCode from 'qrcode';
import axios from "axios";
import {data} from "autoprefixer";

Vue.use(QRCode);
export default {
  data() {
    return {
      qrcode: "", //二维码链接
      orderId: ""//订单ID,
    }
  },
  methods: {
    useqrcode(url){
      alert(url)
      var canvas = document.getElementById("canvas");
      QRCode.toCanvas(canvas, url, function (error) {
        if(error){
          console.log("error: "+error);
        }else{
          console.log("success");
        }
      })
    }
  },
  created() {
    this.orderId = this.$route.query.orderId || '';
    console.log('订单ID:', this.orderId);
    this.orderId=localStorage.getItem("finsessId");

  },
  mounted() {

    axios.get(`/play/wxpay/getQrCodeUrl?randomStr=${this.orderId}`).then(res=>{
      console.log(res.data);
      this.useqrcode(res.data)
    })
    // 当检测到订单状态为success的时候，跳转到支付成功界面
    this.axios.get(`/play/wxpay/orderquery?randomStr=${this.orderId}`).then(
      res =>{
        if (res.data == 'timeout'){
          console.log('请求超时')
        }else if(res.data == 'fail'){
          console.log('支付失败')
        }else if(res.data == 'success'){
          console.log('支付成功')
        }
      }
    )
  }
}
</script>
